<template>
    <div class="venueDetail" ref="venueDetail">
        <div class="vue-detail-wrapper" v-show="DetailList.coverimg" :dataObj="DetailList">
            <!-- 场馆信息 -->
            <div class="banner">
                <img :src="DetailList.coverimg" alt="" />
            </div>
            <div class="banner-text">
                <p class="banner-title">{{DetailList.venuename}}</p>
                <p class="banner-address">地址：{{DetailList.address}}</p>
            </div>
            <split></split>
            <!-- 场馆面积 -->
            <div class="detail-area">
                <div class="left">
                    <span class="text">总面积</span>
                </div>
                <div class="middle">
                    <i class="line"></i>
                </div>
                <div class="right">
                    <span class="text">{{DetailList.area}}㎡</span>
                </div>
            </div>
            <split></split>   
            <!-- 场馆用途 -->
            <div class="detail-use">
                <div class="left">
                    <span class="text">用途</span>
                </div>
                <div class="middle">
                    <i class="line"></i>
                </div>
                <div class="right">
                    <span class="text">{{DetailList.purpose}}</span>
                </div>
            </div>
            <split></split>
            <!-- 设备设施 -->
            <div class="detail-facility">
                <div class="left">
                    <span class="text">设备设施</span>
                </div>
                <div class="middle">
                    <i class="line"></i>
                </div>
                <div class="right">
                    <span class="text">{{DetailList.equipment}}</span>
                </div>
            </div>
            <split></split>
            <!-- 容纳人数 -->
            <div class="detail-people">
                <div class="left">
                    <span class="text">容纳人数</span>
                </div>
                <div class="middle">
                    <i class="line"></i>
                </div>
                <div class="right">
                    <span class="text"><b class="num">{{DetailList.accessnum}}</b> 人</span>
                </div>
            </div>
            <split></split>
            <!-- 预约时间 -->
            <div class="detail-time">
                <div class="left">
                    <span class="text">预约时间</span>
                </div>
                <div class="middle">
                    <i class="line"></i>
                </div>
                <div class="right">
                    <span class="text">周一到周日</span>
                    <span class="hint">上午9点到12点/下午2点到5点</span>
                </div>
            </div>
            <split></split>
            <!-- 场馆详情 -->
            <div class="detail-wrapper">
                <div class="detail-title">
                    <i class="icon"></i>
                    <span class="text">场馆详情</span>
                </div>
                <div class="detail-content" v-html="DetailList.content">
                </div>
            </div>
            <split></split>
            <!-- 场馆预定 -->
            <div class="detail-reserve">
                <div class="reserve-title">
                    <i class="icon"></i>
                    <span class="text">场馆预定</span>
                </div>
                <div class="reserve-startTime">
                    <span class="text">预定时间</span>
                    <div class="input-time" type="text" readonly="readonly" @click="startChange">
                        <span class="text">{{startTime}}</span>
                    </div>
                </div>
                <div class="reserve-checkDay">
                    <span class="text"></span>
                    <div class="check-day">
                        <span class="am" :class="{active: isAm === 1}" @click.stop="handleClickIsAm">上午</span>
                        <span class="pm" :class="{active: isAm === 2}"  @click.stop="handleClickIsPm">下午</span>
                    </div>
                </div>
                <div class="reserve-button" @click="reserveSubmit">{{reserveText}}</div>
            </div>
        </div>
        <!-- 请求数据loading -->
        <div class="loading-wrapper" v-show="!DetailList.coverimg">
            <loading></loading>
        </div>
        <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" :max-date="maxDate" v-show="startTimeShow" @confirm="checkStartTime" @cancel="cancelStartTime" @change="onChange" />
    </div>
</template>

<script>
    import axios from 'axios'
    import MTitle from 'base/title/title'
    import Scroll from 'base/scroll/scroll'
    import Loading from 'base/loading/loading'
    import Split from 'base/split/split'
    import { DatetimePicker } from 'vant'
    import { Toast } from 'vant'
    export default {
        data () {
            return {
                venueDetailFlag: false,
                startTime: "点击选择预定日期",
                endTime: "点击选择预定结束时间",
                currentDate: new Date(),
                minDate: new Date(),
                maxDate: new Date(2030, 10, 1),
                startTimeShow: false,
                endTimeShow: false,
                DetailList: {},
                reserveText: '预约提交',
                timeArr: [],
                isAm: 1
            }
        },
        methods: {
            handleClickIsAm () {
                this.isAm = 1
            },
            handleClickIsPm () {
                this.isAm = 2
            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                } else if (type === 'month') {
                    return `${value}月`
                } else if (type === 'day') {
                    return `${value}日`
                }
                return value
            },
            startChange () {
                this.$nextTick(() => {
                    this.endTimeShow = false
                    this.startTimeShow = true
                    setTimeout(() => {
                        window.scrollTo(0,3800)
                    },200)
                })
            },
            endChange () {
                this.$nextTick(() => {
                    this.startTimeShow = false
                    this.endTimeShow = true
                    setTimeout(() => {
                        window.scrollTo(0,3800)
                    },200)
                })
            },
            onChange (picker, value, index) {
                this.$nextTick(() => {
                    this.timeArr = picker.getValues()
                })
            },
            checkStartTime (picker) {
                this.$nextTick(() => {
                    if (this.timeArr.length === 0) {
                        let time = picker
                        var d = new Date(time)
                        var datetime = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
                    } else {
                        var datetime = this.timeArr[0] + '-' + this.timeArr[1] + '-' + this.timeArr[2]
                    }
                    this.startTime = datetime
                    this.startTimeShow = false
                })
            },
            checkEndTime (picker, value) {
                this.$nextTick(() => {
                    let time = picker
                    var d = new Date(time)  
                    var datetime=d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
                    this.endTime = datetime
                    this.endTimeShow = false
                })
            },
            cancelStartTime () {
                this.$nextTick(() => {
                    this.startTimeShow = !this.startTimeShow
                })
            },
            cancelEndTime () {
                this.$nextTick(() => {
                    this.endTimeShow = !this.endTimeShow
                })
            },
            // 表单提交
            reserveSubmit () {
                if (this.reserveText === "预约成功") {
                    return
                }
                if (this.startTime === "点击选择预定日期") {
                    Toast("预定日期不能为空！")
                    return
                }
                // if (this.endTime === "点击选择预定结束时间") {
                //     Toast("结束时间不能为空！")
                //     return
                // }
                // if (new Date(this.startTime).getTime() > new Date(this.endTime).getTime()) {
                //     Toast("结束时间必须大于开始时间！")
                //     this.endTime = ""
                //     return
                // }
                // 提交数据
                axios.post('/api/index.php?g=Api&m=Ucenter&a=subvenue',{
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    bookdate: this.startTime,
                    timetype: this.isAm,
                    venueid: this.$route.params.id
                }).then((res) => {
                    console.log(res)
                    // 请求成功
                    if (res.data.rescode === "0000") {
                        console.log(res)
                        // Toast
                        Toast.success("提交成功")
                        this.reserveText = "预约成功"
                        // this.$router.go(-1)
                    } else {
                        Toast(res.data.data.resmsg)
                    }
                }).catch((error) => {

                })
            },
            // 页面请求
            getDetailInfo () {
                axios.post('/api/index.php?g=Api&m=Ucenter&a=venuedetail', {
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    venueid: this.$route.params.id
                }).then((res) => {
                    // 请求成功
                    if (res.data.rescode === "0000") {
                        this.DetailList = res.data.data
                        console.log(this.DetailList)
                    }
                }).catch(function (error) {
                    // 请求失败
                })
            }
        },
        components: {MTitle,Loading,Scroll,Split},
        created () {
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .venueDetail
        position: relative
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: #fff
        box-sizing: border-box
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .vue-detail-wrapper
            .banner
                width: 100%
                height: 185px
                img
                    width: 100%
                    height: 100%
            .banner-text
                width: 100%
                height: 70px
                padding: 0 15px
                box-sizing: border-box
                overflow: hidden
                .banner-title
                    margin-top: 16px
                    width: 100%
                    ellipsis()
                .banner-address
                    font-size: 14px
                    color: #0094d4
                    margin-top: 10px
            .detail-area,.detail-use,.detail-facility,.detail-people,.detail-time
                width: 100%
                height: 40px
                padding: 0 15px
                box-sizing: border-box
                overflow: hidden
                display: flex
                align-items: center
                .left
                    flex: 0 0 64px
                    width: 64px
                    text-align: right
                    .text
                        font-size: 16px
                        color: #353535
                .middle
                    flex: 0 0 16px
                    width: 16px
                    .line
                        width: 1px
                        height: 16px
                        background: #d8d8d8
                        display: block
                        margin: 0 auto
                .right
                    flex: 1
                    padding-left: 8px
                    box-sizing: border-box
                    ellipsis()
                    .text
                        font-size: 16px
                        color: #888
                        .num
                            color: #ff5c5c
            .detail-time
                height: 60px
                .right
                    .hint
                        display: block
                        color: #ff7d2e
                        margin-top: 6px
            .detail-wrapper
                width: 100%
                padding: 0 15px
                background: #fff
                box-sizing: border-box
                .detail-title
                    width: 100%
                    height: 40px
                    font-size: 0
                    border-bottom: 1px solid #eee
                    padding-top: 15px
                    box-sizing: border-box
                    .icon
                        background: url('./icon1.png') no-repeat
                        width: 15px
                        height: 10px
                        background-size: 100% 100%
                        display: inline-block
                        vertical-align: middle
                    .text
                        font-size: 16px
                        color: #0094d4
                        display: inline-block
                        vertical-align: middle
                        margin-left: 10px
                .detail-content
                    font-size: 14px
                    color: #888
                    line-height: 150%
                    padding: 15px 0
            .detail-reserve
                width: 100%
                padding: 0 15px
                box-sizing: border-box
                height: 250px
                background: #fff
                .reserve-title
                    width: 100%
                    height: 40px
                    font-size: 0
                    border-bottom: 1px solid #eee
                    padding-top: 15px
                    box-sizing: border-box
                    .icon
                        background: url('./icon2.png') no-repeat
                        width: 16px
                        height: 16px
                        background-size: 100% 100%
                        display: inline-block
                        vertical-align: middle
                    .text
                        font-size: 16px
                        color: #0094d4
                        display: inline-block
                        vertical-align: middle
                        margin-left: 10px
                .reserve-startTime,.reserve-endTime,.reserve-checkDay
                    margin-top: 20px
                    display: flex
                    width: 100%
                    align-items: center
                    .check-day
                        font-size: 0
                        margin-left: 10px
                        .am,.pm
                            width: 80px
                            height: 34px
                            background: #fff
                            border-radius: 6px
                            border: 1px solid #e1e0de
                            box-sizing: border-box
                            display: inline-block
                            font-size: 16px
                            text-align: center
                            line-height: 34px
                            margin-right: 12px
                            &.active
                                border: 1px solid #87ceeb
                                background: #87ceeb
                                color: #fff
                    .text
                        flex: 0 0 64px
                        width: 64px
                        color: #888
                    .input-time
                        border-radius: 0
                        border-bottom: 1px solid #eee
                        height: 34px
                        line-height: 34px
                        font-size: 16px
                        padding: 0 10px
                        box-sizing: border-box
                        width: 100%
                        overflow: hidden
                        margin-left: 12px
                        touch-action: none
                .reserve-button
                    width: 268px
                    height: 38px
                    background: #f8624a
                    color: #fff
                    border-radius: 20px
                    margin: 30px auto
                    text-align: center
                    line-height: 38px
</style>